<template>
  <view class="article-card" @click="goArticle">
    <view class="article-main">
      <view class="article-title">{{ item.articleTitle }}</view>
      <view class="article-meta">
        热度 {{ item.hot }}
      </view>
    </view>
    <view class="article-img-box">
      <uv-image
					    radius="4"
					    :src="src"
					    width="80px"
					    height="80px"
              bgColor="#f8f9fe"
			></uv-image>
      <text v-if="item.vip" class="vip-tag">VIP</text>
     
    </view>
  </view>
</template>

<script>
export default {
  name: 'TmpArticleCourse',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    goArticle(){
      let articleCode = this.item.articleCode;
      uni.navigateTo({
        url: '/pages/article/article?articleCode='+articleCode
      });
    }
  },
}
</script>

<style scoped>
.article-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx 0 rgba(36,104,242,0.08);
  margin-bottom: 32rpx;
  padding: 36rpx 32rpx 32rpx 32rpx;
}
.article-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article-title {
  font-size: 30rpx;
  color: #222;
  /* font-weight: 500; */
  margin-bottom: 18rpx;
  line-height: 1.4;
}
.article-meta {
  font-size: 24rpx;
  color: #d1d1d1;
}
.article-img-box {
  width: 130rpx;
  height: 120rpx;
  background: #f8f9fe;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 32rpx;
  position: relative;
  flex-shrink: 0;
}
.vip-tag {
  position: absolute;
  top: 0rpx;
  right: 10rpx;
  color: #FFD700;
  font-size: 28rpx;
  font-weight: 500;
}
</style> 